<template>
  <div class="wrapper">
		<div class="header">创建群</div>
		<div class="content">
			<div class="friend_img">
					<div class="update_face">上传头像</div>
					<input type="file" class="group_face" value="" name="group_face">
					<input type="hidden" id="group_url" v-model="createInfo._groupfaceUrl" value="" name="">
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">群号</span>
							<span class="items_text"><input type="text" v-model="createInfo._groupId" id="group_id" name=""></span>
						</div>
						<!-- <div class="items_right"><i class="iconfont icon-dayuhao"></i></div> -->
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">群名称</span>
							<span class="items_text"><input type="text" v-model="createInfo._groupName" id="group_name" name=""></span>
						</div>
						<!-- <div class="items_right"><i class="iconfont icon-dayuhao"></i></div> -->
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">群公告</span>
							<span class="items_text"><input type="text" v-model="createInfo._groupDesc" name=""></span>
						</div>
					<!-- 	<div class="items_right"><i class="iconfont icon-dayuhao"></i></div> -->
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">群类型</span>
							<span class="items_text">{{groupType[iNow].desc}}</span>
              <input type="hidden" v-model="createInfo._groupType">
						</div>
						<div class="items_right" @click="changeGroupType()">切换<i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">创建时间</span>
							<span class="items_text">2017-11-6</span>
						</div>
						<!-- <div class="items_right"><i class="iconfont icon-dayuhao"></i></div> -->
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">成员</span>
							<span class="items_text"></span>
						</div>
						<div class="items_right">邀请加群<i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div>
			<div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">群简介</span>
							<span class="items_text"><input type="text" v-model="createInfo._groupIntro" id="group_info" name="group_info"></span>
						</div>
						<!-- <div class="items_right">邀请加群<i class="iconfont icon-dayuhao"></i></div> -->
					</div>
			</div>
			<!-- <div class="parting_line"></div> -->
			<!-- <div class="user_info">
					<div class="user_underline">
						<div class="items_left">
							<span class="items_title">加群方式</span>
							<span class="items_text">填写资料申请加群</span>
						</div>
					<div class="items_right"><i class="iconfont icon-dayuhao"></i></div>
					</div>
			</div> -->
			<div class="details_btn">
				<button class="color_green" ref="sendBtn" id="create_group_btn">创建群</button>
			</div>
		</div>
	</div>
</template>
<script>
import Client from '../../config/common'
export default {
  data () {
    return {
      createInfo: { // 创建群的信息
        _groupfaceUrl: 'https://misc.360buyimg.com/mtd/pc/index/home/images/logo.v3@2x.jpg', //群头像
        _groupId: '', // 群ID
        _groupName: '', // 群名称
        _groupDesc: '', // 群公告
        _groupType: 'ChatRoom', // 群类型
        _groupIntro: '' // 群简介
      },
			loginInfo: {}, //保存登录成功的信息
			groupType: [ // Private/Public/ChatRoom
					{"type":"Private","desc":"私有群 ( 不公开,只能邀请加入 )"},
					{"type":"Public","desc":"公开群 ( 类似Q群 )"},
					{"type":"ChatRoom","desc":"聊天室 ( 可以随意进出 )"},
			],
			iNow: 0 // 群组类型下标
    }
  },
  created () {
     
    // 登录初始化
    this.initLogin();
    
  },
  methods: {

    // 登录初始化
    initLogin(){
      Client.login(this.getLoginInfo);
    },

    // 获得登录成功信息
    getLoginInfo(loginInfo){
      // 将 登录信息保存在 vue的data里
      this.loginInfo = loginInfo;
      let That = this;
      //点击按钮执行创建群操作
      $(this.$refs.sendBtn).on("click", function(){
        That.doCreategGroup();
      });
      
		},
		
		// 切换群组类型
		changeGroupType() {
			let iNow = this.iNow;
			iNow = iNow + 1;
			iNow = iNow%3;
			Client.log(iNow);
			this.iNow = iNow;

		},

    // 创建群
    doCreategGroup(){
      // var sel_friends = $('#select_friends').val();
              let That = this;
							let member_list = [];
							/* var members = sel_friends.split(";"); //字符分割
							for (var i = 0; i < members.length; i++) {
									if (members[i] && members[i].length > 0) {
											member_list.push(members[i]);
									}
							} */
							let faceurl = this.createInfo._groupfaceUrl;
							let cg_id =this.createInfo._groupId.trim();
							if (cg_id && !/^[A-Za-z0-9_]+$/gi.test(cg_id)) {
									alert('群组ID只能是数字、字母或下划线');
									return
							}
							if (this.createInfo._groupName.length == 0) {
									alert('请输入群组名称');
									return;
							}
							if (webim.Tool.trimStr(this.createInfo._groupName).length == 0) {
									alert('您输入的群组名称全是空格,请重新输入');
									return;
							}
							if (webim.Tool.getStrBytes(this.createInfo._groupName) > 30) {
									alert('您输入的群组名称超出限制(最长10个汉字)');
									return;
							}
							if (webim.Tool.getStrBytes(this.createInfo._groupDesc) > 150) {
									alert('您输入的群组公告超出限制(最长50个汉字)');
									return;
							}
							if (webim.Tool.getStrBytes(this.createInfo._groupIntro) > 120) {
									alert('您输入的群组简介超出限制(最长40个汉字)');
									return;
							}
							// var groupType = $('input[name="cg_type_radio"]:checked').val();
							let options = {
									'GroupId': cg_id,
									'Owner_Account': this.loginInfo.identifier,
									// 'Type': groupType, //Private/Public/ChatRoom/AVChatRoom
									'Type': this.groupType[this.iNow].type, //Private/Public/ChatRoom/AVChatRoom
									'Name': this.createInfo._groupName,
									'Notification': this.createInfo._groupDesc,
									'Introduction': this.createInfo._groupIntro,
									'MemberList': member_list
							};
							if (faceurl) {
									options.FaceUrl = faceurl;
							}
							/* if (groupType != 'Private') { //非私有群才支持ApplyJoinOption属性
									options.ApplyJoinOption = $('input[name="cg_ajp_type_radio"]:checked').val();
							} */
							webim.createGroup(
									options,
									function(resp) {
										console.log(resp);
											// $('#create_group_dialog').modal('hide');
                      alert('创建群成功');
                      That.$router.push({path: '/groupList'});
											// 读取我的群组列表
											// getJoinedGroupListHigh(getGroupsCallbackOK);
									},
									function(err) {
											console.log(options);
											alert(err.ErrorInfo);
									}
							);
			
    },
    
  }
}
</script>
<style lang="scss"> 
   @import '../../style/create_group';
</style>


